<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>幻次元登录界面</title>
		<link href="../css/login.css" rel="stylesheet" />
		<script src="../js/crypto-js.js"></script>
		<script src="../js/mui.min.js"></script>
		<link href="../css/mui.min.css" rel="stylesheet" />
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		</header>
		<div class="login-container">
			<h2>幻次元登录</h2>

			<!-- 用户名和密码输入框 -->
			<div class="input-group">
				<input type="text" placeholder="账号" id="username" required>
			</div>
			<div class="input-group">
				<input type="password" placeholder="密码" id="password" required>
			</div>

			<!-- 复选框 - 协议同意 -->
			<div class="checkbox-group">
				<label>
					<input type="checkbox" id="agree" required>
					我已阅读并同意 <a href="#">隐私条款</a> 和 <a href="#">用户协议</a>
				</label>
			</div>

			<!-- 登录按钮 -->
			<button class="login-btn" id="loginBtn" disabled>登录</button>

			<!-- 快速登录按钮 -->
			<button class="quick-login-btn" id="quickloginbtn">QQ快速登录</button>

			<div class="separator">
				<span>—— 或 ——</span>
			</div>

			<!-- 注册链接 -->
			<a href="./register.html">注册幻次元账号</a>
		</div>

		<script>
			// JavaScript: 启用/禁用登录按钮
			const checkbox = document.getElementById('agree');
			const loginBtn = document.getElementById('loginBtn');

			// 监听复选框状态变化，启用或禁用登录按钮
			checkbox.addEventListener('change', function() {
				loginBtn.disabled = !checkbox.checked;
			});

			// 登录按钮点击事件
			loginBtn.addEventListener('click', async function() {
				const username = document.getElementById('username').value;
				let password = document.getElementById('password').value;

				// 简单的前端验证
				if (!username || !password) {
					mui.toast('请输入完整的账号和密码');
					return;
				}

				// 创建登录请求的数据对象
				const data = {
					username: username,
					password: password // 发送加密后的密码
				};

				try {
					// 发送POST请求到后端接口
					const response = await fetch('http://tcp.gykang.eu.org:8080/api/login', {
						method: 'POST',
						headers: {
							'Content-Type': 'application/json'
						},
						body: JSON.stringify(data)
					});

					// 处理响应
					if (response.ok) {
						const result = await response.json();
						if (result.success) {
							mui.toast('登录成功');

							id = result.id
							localStorage.setItem('loginID', id);
							const userID = localStorage.getItem('loginID');
							console.log('用户ID:', userID);
							mui.back();
							// 你可以在这里处理成功后的逻辑，如跳转到主页
						} else {
							mui.toast('登录失败：' + result.message);
						}
					} else {
						mui.toast('请求失败，请稍后重试');
					}
				} catch (error) {
					mui.toast('网络错误，请稍后重试');
					console.error('Login error:', error);
				}
			});
			quickloginbtn.addEventListener('click', async function() {
				// 快速登陆的执行代码
				var qqOauth = null;
				plus.oauth.getServices(function(services) {
					for (var i in services) {
						var service = services[i];
						// 获取QQ登录对象
						if (service.id == 'qq') {
							qqOauth = service;
							break;
						}
					}
					qqOauth.login(function(oauth) {
						// 授权成功，qqOauth.authResult 中保存授权信息
						mui.toast(qqOauth.authResult);
					}, function(err) {
						// 登录授权失败
						// err.code是错误码
						mui.toast(err.code);
					})
				}, function(err) {
					// 获取 services 失败
					mui.toast(err);
				})

			});
		</script>

	</body>
</html>